<template lang='pug'>
  //砍价商品
  div.box
    el-header.header(style="height:40px;")
      el-input.mar_r( style="width:200px" v-model="listQuery.keyword" placeholder="搜索" )
      el-button.mar_r( type="primary" @click="searchBtn") 搜索
      el-button.mar_r( type="primary"  :icon="listQuery.platformType == 1?'el-icon-check':''" @click="changeTypes(1)") 淘宝商品
      el-button( type="primary"  :icon="listQuery.platformType == 2?'el-icon-check':''" @click="changeTypes(2)") 拼多多商品
    el-main
      el-table( :data="list"  fit highlight-current-row style="width: 100%" )
        el-table-column(  label="序号" width="100"  align="center" type="index"  :index="indexMethod")
        
        el-table-column( align="center" label="商品" width="120")
          template(slot-scope="scope")
            img( style="width:100px;height:100px;"  :src="scope.row.pictUrl") 
        el-table-column(align="center" label="标题")
          template(slot-scope="scope")
            span {{scope.row.title}}
        el-table-column(align="center" label="销量" width="60")
          template(slot-scope="scope")
            span {{scope.row.volume}}
        el-table-column(align="center" label="佣金比例")
          template(slot-scope="scope")
            span {{scope.row.commissionRate}}
        el-table-column(align="center" label="券额" width="60")
          template(slot-scope="scope")
            span {{scope.row.couponPrice}}
        el-table-column( align="center" label="单价" width="60")
          template(slot-scope="scope")
            span {{scope.row.finalPrice}}
        el-table-column( align="center" label="优惠券有效期" width="120")
          template(slot-scope="scope")
            div {{scope.row.couponStartTime}}
            div 到
            div {{scope.row.couponEndTime}}
        el-table-column( align="center" label="砍价人数" width="140")
          template(slot-scope="scope")
            span {{scope.row.allJoinUserTotal}}(所有) / {{scope.row.realAllJoinUserTotal}}(真实)
        el-table-column( align="center" label="活动参与")
          template(slot-scope="scope")
            span {{scope.row.state == 0?'下架':'上架'}}
        el-table-column( align="center" label="砍价人数初始值")
          template(slot-scope="scope")
            el-input(v-if="scope.row.edit" placeholder="砍价人数的最低值" v-model="scope.row.allJoinUserTotal")
            span(v-else) {{scope.row.allJoinUserTotal }}
  
        el-table-column( align="center" label="砍价人数上限")
          template(slot-scope="scope")
            el-input(v-if="scope.row.edit" placeholder="砍价人数上限" v-model="scope.row.joinUserToplimit")
            span(v-else) {{scope.row.joinUserToplimit}}
            

        el-table-column( align="center" label="砍价时间上限")
          template(slot-scope="scope")
            el-input(v-if="scope.row.edit" placeholder="最高砍价的时长，以小时为单位" v-model="scope.row.timeToplimit")
            span(v-else) {{scope.row.timeToplimit}}
            
        el-table-column( align="center" fixed="right" width="250" label="操作")
          template(slot-scope="scope")
            el-button(size="small" type="primary" @click="scope.row.edit=true" v-if="!scope.row.edit") 编辑
            el-button(size="small" type="success" @click="finished(scope.row)" v-else) 完成
            el-button(size="small" type="primary" @click="upDown(scope.row)" v-if="scope.row.state == 0") 上架
            el-button(size="small" type="danger" @click="upDown(scope.row)" v-else) 下架
            el-button( size="small" type="danger" @click="delRow(scope.row.id)" ) 删除

    el-footer
      el-pagination(
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total,sizes, prev, pager, next,jumper"
      :total="total")
</template>

<script>

import { page,delObj,upDownObj,upDateObj } from '@/api/CutClass/CutGood'
import { mixin } from "@/mixin/index";
export default {
  mixins: [mixin],
  name: "Login",
  data() {
    return {
      listQuery:{
        page: 1,
        limit: 10,
        keyword:'',
        platformType:1
      },
      list:[],
      total:0,
      
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //上下架
    async upDown(e){
      const Response = await upDownObj({id:e.id,state:e.state == 1? 0 : 1})
      if(Response){
        await this.getList();
        this.Notice('成功','操作成功','success');
      } 
    },
    //切换平台
    changeTypes(plat){
      this.listQuery.platformType = plat;
      this.getList();
    },
    //处理页面数据
    dealQuery(){
      return {
        page:this.listQuery.page,
        size:this.listQuery.limit,
        keyword:this.listQuery.keyword,
        platformType:this.listQuery.platformType 
      }
    },
    //获取表格
    async getList(){

      const query = this.dealQuery();
      const Response = await page(query)
      const list = Response.data.records;
      for(let i of list){ i.edit = false }
      this.list =list;
      this.total = Response.data.total;
    },
    searchBtn(){
      this.getList();
    },
    //处理编辑数据
    dealEdit(row){
      return{
        id : row.id,
        joinUserToplimit : row.joinUserToplimit,
        timeToplimit : row.timeToplimit,
        allJoinUserTotal : row.allJoinUserTotal
      }
    },
    //删除
    delRow(id){
      
      this.delConfirm()
      .then(res=>{
        console.log(id)
        delObj(id)
        .then(Response=>{
          if(Response){
            this.getList();
            this.Notice('成功','删除成功','success');
          }
        })
      })
      .catch(err=>{
        console.log('取消删除')
      })
    },
    //编辑完成
    async finished(row){
      row.edit = false;
      const obj = this.dealEdit(row);
      const Response = await upDateObj(obj);
      if(Response){
        this.Notice('成功','修改成功','success');
      }
    }
  }
};
</script>
<style lang="less" scoped>


</style>


